<template>
  <div class="y-big-conter">
    <!-- 最外层容器 -->
    <div class="l-conter-left">
      <div class="y-nav">
        <span class="y-title">档案包列表</span>
        <!-- 点击新建加号得对话框 -->
        <span class="y-tb" @click="jia()">
          <a-icon type="plus" @click="dialogFormVisible = true" />
        </span>
      </div>
      <!-- <div class="jiati" @click="jia()">添加</div> -->
      <!-- 父级diolog-->
      <el-dialog title="父级新建档案包" :visible.sync="dialogFormVisible">
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
          <el-row>
            <el-col :span="8" class="y-left-inp">
              <el-form-item label="名称：" prop="file_type_name">
                <el-input  v-model="ruleForm.file_type_name" class="padding"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="y-right-inp">
              <el-form-item label="排序：" prop="file_type_sort">
                <a-input-number
                  class="sort"
                  v-model="ruleForm.file_type_sort"
                  :min="1"
                  :max="100"
                  @change="onChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="SearchSure('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 子集添加 -->
      <el-dialog title="子级新建档案包" :visible.sync="dialogFormVisible1">
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
          <el-row>
            <el-col :span="8" class="y-left-inp">
              <el-form-item label="名称：" prop="file_type_name">
                <el-input  v-model="ruleForm.file_type_name" class="padding"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="y-right-inp">
              <el-form-item label="排序：" prop="file_type_sort">
                <a-input-number
                  class="sort"
                  v-model="ruleForm.file_type_sort"
                  :min="1"
                  :max="100"
                  @change="onChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="SearchSure1('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 编辑 -->
      <el-dialog title="档案包编辑" :visible.sync="dialogFormVisible2">
        <el-form ref="ruleForm" :rules="rules" :model="ruleForm1">
          <el-row>
            <el-col :span="8" class="y-left-inp">
              <el-form-item label="名称：" prop="file_type_name">
                <el-input class="padding" v-model="ruleForm1.file_type_name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8" class="y-right-inp">
              <el-form-item label="排序：" prop="file_type_sort">
                <a-input-number
                  class="sort"
                  v-model="ruleForm1.file_type_sort"
                  :min="1"
                  :max="100"
                  @change="onChange"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="SearchSure2('ruleForm')">确 定</el-button>
        </div>
      </el-dialog>

      <el-tree
        :data="newData"
        :props="defaultProps"
        show-checkboxtr
        node-key="id"
        default-expand-all
        :expand-on-click-node="false"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              icon="el-icon-circle-plus-outline"
              type="text"
              size="mini"
              @click="() => append(data)"
            >
              <!-- <i class="el-icon-deleteel-icon-circle-plus-outline"></i> -->
            </el-button>
            <el-button
              icon="el-icon-circle-close"
              type="text"
              size="mini"
              @click="() => remove(node, data)"
            ></el-button>
            <el-button
              icon="el-icon-edit-outline"
              type="text"
              size="mini"
              @click="() => edit(node, data)"
            ></el-button>
          </span>
        </span>
      </el-tree>


    </div>
    <!-- 表格编辑模态框 -->
    <el-dialog title="编辑项目档案:" :visible.sync="dialogFormVisibleedit" width="450px">
      <el-form :model="form" ref="updataForm">
        <el-form-item label="文件名称:" :label-width="formLabelWidth">
          <el-input v-model="bianjiform.file_name" autocomplete="off"  class="padding"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quaoxiao(form)">取 消</el-button>
        <el-button type="primary" @click="SureEdit1()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增模态框 -->
    <el-dialog title="新增项目档案:" :visible.sync="dialogFormVisibleadd" width="450px">
      <el-form :model="form" ref="updataForm">
        <el-form-item label="档案名称:" :label-width="formLabelWidth">
          <el-input v-model="form.file_name" autocomplete="off"  class="padding"></el-input>
        </el-form-item>
        <el-form-item label="父级档案类型:" :label-width="formLabelWidth">
          <el-select v-model="form.file_type_id" @change="Fuji()" placeholder="请选择">
            <el-option
              v-for="item in linput1"
              :key="item.file_type_id"
              :label="item.file_type_name"
              :value="item.file_type_id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子级档案类型:" :label-width="formLabelWidth">
          <el-select v-model="form.file_type_id1" placeholder="请选择">
            <el-option
              v-for="item in linput2"
              :key="item.file_type_id"
              :label="item.file_type_name"
              :value="item.file_type_id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="附件:" :label-width="formLabelWidth">
          <el-input v-model="form.file_url" autocomplete="off"  class="padding"></el-input>
          <el-upload
            action="api/pic/load"
            :headers="userToken"
            :on-success="handleSuccess"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :show-file-list="false"
          >
            <el-button type="text" class="clicksub" size="medium">
              上传
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quaoxiao(form)">取 消</el-button>
        <el-button type="primary" @click="SureEdit('updataForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 右侧表格 -->
    <div class="y-table">
      <!-- 输入框 -->
      <div class="y-form">
        <el-form :inline="true" ref="ruleForm" :model="ruleFormshu" class="demo-form-inline">
          <!-- 输入框部分 -->
          <el-form-item label="文件名称：">
            <el-input v-model="ruleFormshu.file_name" placeholder="请输入"  class="padding"></el-input>
            <!-- 按钮搜索重置部分 -->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search('ruleFormshu')">搜索</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
            <el-button type="primary" @click="addtable('ruleForm')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="y-table-style">
        <el-table
          :border="true"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          ref="multipleTable"
          :data="tableData"
          highlight-current-row
          tooltip-effect="dark"
          style="width: 98%, text-align: center "
        >
          <!-- 序号 -->
          <!-- :index="indexFn" -->
          <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
          <el-table-column label="文件名称" prop="file_name" width="160" align="center"></el-table-column>
          <el-table-column
            label="上传者"
            prop="buildPeople.people_name"
            width="160"
            hight="30px"
            align="center"
          ></el-table-column>
          <el-table-column label="大小" prop="file_size" width="160" align="center"></el-table-column>
          <el-table-column label="上传日期" prop="file_date" width="160" align="center"></el-table-column>
          <el-table-column label="文件链接" prop="file_name" width="160" align="center">
            <template slot-scope="scope">
              <a
                :href="scope.row.file_url"
                target="_blank"
                rel="noopener noreferrer"
              >{{ scope.row.file_name }}</a>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button type="text" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import http from "../api";
let id = 1000;
export default {
  data() {
    const data = [
      {
        id: 1,
        label: "一级 1",
        children: [
          {
            id: 4,
            label: "二级 1-1",
            children: [
              {
                id: 9,
                label: "三级 1-1-1",
              },
              {
                id: 10,
                label: "三级 1-1-2",
              },
            ],
          },
        ],
      },
      {
        id: 2,
        label: "一级 2",
        children: [
          {
            id: 5,
            label: "二级 2-1",
          },
          {
            id: 6,
            label: "二级 2-2",
          },
        ],
      },
      {
        id: 3,
        label: "一级 3",
        children: [
          {
            id: 7,
            label: "二级 3-1",
          },
          {
            id: 8,
            label: "二级 3-2",
          },
        ],
      },
    ];
    return {
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],

      linput1: [], //父级档案
      linput2: [], //子级档案
      chuan: {}, //上传res

      //  defaultProps: {
      //     children: 'children',
      //     label: 'file_type_name'
      //    },
      data: JSON.parse(JSON.stringify(data)),
      data: JSON.parse(JSON.stringify(data)),
      tableData: [],
      treeData: [], //总数据
      newData: [],
      can: {}, //删除data参数
      can1: {}, //编辑data参数
      userToken: {},
      // treeData1:[],//外层数据

      // ====树形控件======
      a: [], //外层存放数据
      roleData: [], //总数居
      defaultProps: {
        children: "children",
        label: "file_type_name",
      },
      //=====对话框=======
      dialogFormVisible: false, //
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      dialogVisible: false, //添加
      outerVisible: false, //编辑
      dialogFormVisibleadd: false, //新增模态框：
      dialogFormVisibleedit: false, //编辑模态框
      // =====加号对话框输入框=====
      ruleForm: {
        file_type_sort: "",
        file_type_name: "",
      },
      ruleForm1: {}, //编辑
      form: {
        file_type_id: "",
        file_type_id1: "",
        file_url: "",
        file_name: "",
      }, //新增模态框form:
      ruleFormshu: {
        file_name: "",
      },
      bianjiform: {},
      // =====添加===
      // form: {
      //   file_type_sort: "",
      //   file_type_name: "",
      // },
      // ======编辑=====
      conform: {},
      // ======删除======
      arr: {}, //删除时传给后台

      formLabelWidth: "120px",
      //验证
      rules: {},

      // ======右侧输入框=======

      // ruleForm: {
      //   equipment_code: "", //设备编号
      // },
      // ======表格======
      currList: [], //当前展示的数据数组
    };
  },

  methods: {
    search() {
      http.dangantable(this.ruleFormshu).then((res) => {
        console.log("搜素", res);
        this.tableData = res.data;
      });
      // if (this.ruleFormshu.file_name !== "") {
      //   http.dangantable(this.ruleFormshu).then((res) => {
      //     console.log("搜素", res);
      //   });
      // }
    },

    handleDelete(index, row) {
      console.log("row", row);
      let delcan = {};
      delcan.file_id = row.file_id;
      http.dangantabldel(delcan).then((res) => {
        console.log("res.data", res);
        http.dangantable({ file_name: "" }).then((res) => {
          this.tableData = res.data;
          console.log("表格", res.data);
        });
      });
    },
    SureEdit1() {
      let edit = {};
      edit.file_name = this.bianjiform.file_name;
      edit.file_id = this.bianjiform.file_id;
      console.log("edit", edit);
      this.dialogFormVisibleedit = false;
      http.dangantabledit(edit).then((res) => {
        console.log("表格编辑确定按钮", res);
        http.dangantable({}).then((res) => {
          console.log("搜素", res);
          this.tableData = res.data;
        });
      });
    },
    // 表格编辑
    handleEdit(index, row) {
      this.dialogFormVisibleedit = true;
      this.bianjiform = JSON.parse(JSON.stringify(row));
      console.log("row", row);
    },
    Fuji() {
      this.form.file_type_id1 = "";
      let fuinput = {};
      fuinput.file_type_fid = this.form.file_type_id;
      console.log("父级参数", fuinput);
      http.danganaddinput(fuinput).then((res) => {
        console.log("子级数据", res.data);
        this.linput2 = res.data;
      });
    },
    // 新增模态框确定
    SureEdit() {
      let sure = {};
      sure.file_name = this.form.file_name;
      sure.people_id = sessionStorage.getItem("people_id");
      console.log("people_id", sure.people_id);
      sure.file_size = this.chuan.fileSize;
      sure.file_url = this.chuan.name;
      sure.file_type_id = this.form.file_type_id1;
      console.log("sure", sure);
      http.danganaddsure(sure).then((res) => {
        console.log("成功", res.data);
      });
      this.dialogFormVisibleadd = false;
      http.dangantable({ file_name: "" }).then((res) => {
        this.tableData = res.data;
        console.log("表格", res.data);
      });

      // console.log(this.form);
    },
    handlePreview(file) {
      console.log(file);
    },

    // 上传成功
    handleSuccess(res, file, fileList) {
      console.log("文件", res);
      this.chuan = res;
      this.form.file_url = res.name;
      this.$notify.success({
        title: "成功",
        message: `文件上传成功`,
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 新增模态框取消
    quaoxiao() {},
    addtable() {
      this.dialogFormVisibleadd = true;
      // http.project({"file_type_fid": "0"}).then((res)=>{
      // })
      http.danganaddinput({ file_type_fid: "0" }).then((res) => {
        this.linput1 = res.data;
        console.log("下拉框", res.data);
      });
    },
    jia() {
      this.dialogFormVisible = true;
    },
    append(data) {
      this.dialogFormVisible1 = true;
      this.can = data;
      console.log("data", data);
      // const newChild = { id: id++, label: 'testtest', children: [] };
      // if (!data.children) {
      //   this.$set(data, 'children', []);
      // }
      // data.children.push(newChild);
    },
    // 子级确定按钮
    SearchSure1() {
      this.dialogFormVisible1 = false;
      console.log("this.can", this.can);
      console.log("this.ruleForm", this.ruleForm);
      this.ruleForm.file_type_fid = this.can.file_type_id;
      console.log("newruleForm", this.ruleForm);
      http.newconstruction(this.ruleForm).then((r) => {
        console.log("子级添加", r);
        http.project().then((r) => {
          console.log("子级总数据", r.data);
          this.treeData = r.data;
          console.log("总数据", this.treeData);
          var treeData1 = [];
          this.treeData.forEach((item, index, arr) => {
            if (item.file_type_fid === 0) {
              treeData1.push(item);
            }
          });
          console.log("this.treeData1", treeData1);
          treeData1.forEach((item1, index1, arr1) => {
            let treeData2 = [];
            this.treeData.forEach((item2, index2, arr2) => {
              if (item2.file_type_fid === item1.file_type_id) {
                treeData2.push(item2);
              }
            });
            item1.children = treeData2;
          });
          this.newData = treeData1;
          console.log("新总数据", treeData1);
        });
      });
      // this.$refs[formName].validate((valid) => {
      //   if (valid) {
      //     console.log('this.can',this.can)
      //

      //      http.newconstruction(this.ruleForm).then((r) => {
      //       console.log("添加", r.data);
      //     });
      //   }
      //输入框发送后台
      //     this.ruleForm.file_type_fid=0;
      //  console.log('this.ruleForm',this.ruleForm)
      //     http.newconstruction(this.ruleForm).then((r)=>{
      //       console.log('添加',r.data)
      //     })
      //      this.dialogFormVisible = false;
      // }
      // this.conform = this.ruleForm;
      // console.log("添加成功", this.ruleForm);
      // });
      // }
    },
    //
    remove(node, data) {
      console.log("删除数据", data);
      console.log("删除数据", node);
      let delobj = {};
      delobj.file_type_id = data.file_type_id;
      console.log("删除参数", delobj);
      http.delete(delobj).then((r) => {
        console.log("删除", r);
        http.project().then((r) => {
          console.log("子级总数据", r.data);
          this.treeData = r.data;
          console.log("总数据", this.treeData);
          var treeData1 = [];
          this.treeData.forEach((item, index, arr) => {
            if (item.file_type_fid === 0) {
              treeData1.push(item);
            }
          });
          console.log("this.treeData1", treeData1);
          treeData1.forEach((item1, index1, arr1) => {
            let treeData2 = [];
            this.treeData.forEach((item2, index2, arr2) => {
              if (item2.file_type_fid === item1.file_type_id) {
                treeData2.push(item2);
              }
            });
            item1.children = treeData2;
          });
          this.newData = treeData1;
          console.log("新总数据", treeData1);
        });
      });

      // const parent = node.parent;
      // const children = parent.data.children || parent.data;
      // const index = children.findIndex((d) => d.id === data.id);
      // children.splice(index, 1);
    },
    edit(node, data) {
      this.dialogFormVisible2 = true;
      //  this.can1=data;
      // this.ruleForm1=this.can1,
      this.ruleForm1 = JSON.parse(JSON.stringify(data));
      console.log("编辑", this.ruleForm1);
    },
    // 编辑确定按钮
    SearchSure2() {
      console.log("编辑ruleForm", this.ruleForm1);

      http.danganedit(this.ruleForm1).then((r) => {
        console.log("编辑返回数据", r);
        http.project().then((r) => {
          console.log("子级总数据", r.data);
          this.treeData = r.data;
          console.log("总数据", this.treeData);
          var treeData1 = [];
          this.treeData.forEach((item, index, arr) => {
            if (item.file_type_fid === 0) {
              treeData1.push(item);
            }
          });
          console.log("this.treeData1", treeData1);
          treeData1.forEach((item1, index1, arr1) => {
            let treeData2 = [];
            this.treeData.forEach((item2, index2, arr2) => {
              if (item2.file_type_fid === item1.file_type_id) {
                treeData2.push(item2);
              }
            });
            item1.children = treeData2;
          });
          this.newData = treeData1;
          console.log("新总数据", treeData1);
        });
      });
      this.dialogFormVisible2 = false;
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>{node.label}</span>
          <span>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.append(data)}
            >
              Append
            </el-button>
            <el-button
              size="mini"
              type="text"
              on-click={() => this.remove(node, data)}
            >
              Delete
            </el-button>
          </span>
        </span>
      );
    },
    // ====下拉菜单添加======
    submitfile() {
      //点击选项触发事件
      this.dialogVisible = true;
      console.log("111");
    },
    // ====下拉菜单编辑======
    submit(data) {
      this.outerVisible = true;
      this.arr = data;
      console.log("只是", this.arr);
      // file_type_sort: "",
      // file_type_name: "",
      console.log("222", this.arr);
    },
    //树形控件的点击事件获取外层的数据
    //点击父级工程资料时把id赋值给后台
    handleNodeClick(data) {
      console.log(data);
      this.arr = data;
      console.log("只是", this.arr);

      this.form.file_type_sort = data.file_type_sort;
      this.form.file_type_name = data.file_type_name;
      this.form.file_type_fid = data.file_type_id;
    },
    // =======弹框输入框排序====
    onChange(value) {
      console.log("changed", value);
    },
    handleClick() {
      alert("button click");
    },
    //======================弹框父级添加选项 确定按钮=======================
    SearchSure(formName) {
      // let a = [];
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //输入框发送后台
          this.ruleForm.file_type_fid = 0;
          console.log("this.ruleForm", this.ruleForm);
          http.newconstruction(this.ruleForm).then((r) => {
            console.log("添加", r.data);
          });
          this.dialogFormVisible = false;

          http.project().then((r) => {
            console.log("总数据aaaaa", r.data);
            this.treeData = r.data;
            console.log("总数据", this.treeData);
            var treeData1 = [];
            this.treeData.forEach((item, index, arr) => {
              if (item.file_type_fid === 0) {
                treeData1.push(item);
              }
            });
            console.log("this.treeData1", treeData1);
            treeData1.forEach((item1, index1, arr1) => {
              let treeData2 = [];
              this.treeData.forEach((item2, index2, arr2) => {
                if (item2.file_type_fid === item1.file_type_id) {
                  treeData2.push(item2);
                }
              });
              item1.children = treeData2;
            });
            this.newData = treeData1;
            console.log("新总数据", treeData1);
          });

          // http.newconstruction(this.ruleForm).then((r) => {
          //   console.log("这是新建的", r);
          //   //提交后提示
          //   alert(r.msg);
          //   //重新加载数据
          //   this.roleData = [];
          //   this.a = [];
          //   http.project(this.ruleForm).then((r) => {

          // console.log(r.data);
          // this.roleData = r.data;
          // let rootChildren = [];
          // this.roleData.forEach((item, index, arr) => {
          //   if (item.file_type_fid === 0) {
          //     this.a.push(item);
          //   }
          // });
          // console.log(this.a);
          // this.a.forEach((item1, index1, arr1) => {
          //   let c = [];
          //   this.roleData.forEach((item2, index2, arr2) => {
          //     if (item2.file_type_fid === item1.file_type_id) {
          //       c.push(item2);
          //     }
          //   });
          //   item1.children = c;
          // });
          // });
          // });
        }
        // this.conform = this.ruleForm;
        console.log("添加成功", this.ruleForm);
      });
    },
    // 字级确定按钮
    //========================工程资料添加选项 确定按钮===========================
    confirm(formName) {
      let a = [];
      this.dialogVisible = false;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //输入框发送后台
          console.log("这是", this.form);

          http.newconstruction(this.form).then((r) => {
            console.log("这是新建的", r);
            //提交后提示
            alert(r.msg);
            //重新加载数据
            this.roleData = [];
            this.a = [];
            http.project(this.ruleForm).then((r) => {
              console.log(r.data);
              this.roleData = r.data;
              this.roleData.forEach((item, index, arr) => {
                if (item.file_type_fid === 0) {
                  this.a.push(item);
                }
              });
              console.log(this.a);
              this.a.forEach((item1, index1, arr1) => {
                let c = [];
                this.roleData.forEach((item2, index2, arr2) => {
                  if (item2.file_type_fid === item1.file_type_id) {
                    c.push(item2);
                  }
                });
                item1.children = c;
              });
            });
          });
        }
        // this.conform = this.form; //添加赋值给编辑
        console.log("这是", this.form);
      });
    },
    // ============工程资料弹框编辑=====================================
    Editbutton(data) {
      this.conform = this.arr;
      this.outerVisible = false;
      console.log("编辑", data);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          http.compile(this.conform).then((r) => {});
        }
      });
    },
    // 编辑里的取消按钮
    quxiao(conform) {
      // console.log(formInline);
      this.outerVisible = false;
      // 点取消后清空
      for (let key in conform) {
        conform[key] = "";
      }
    },

    // =============弹框删除按钮======================================
    del() {
      http.delete(this.arr).then((r) => {
        alert(r.msg);
        this.roleData = [];
        this.a = [];
        http.project(this.ruleForm).then((r) => {
          console.log(r.data);
          this.roleData = r.data;
          //遍历循环总数居
          this.roleData.forEach((item, index, arr) => {
            //如果总数据元素的file_type_fid属于外层加在新数组a里
            if (item.file_type_fid === 0) {
              this.a.push(item);
            }
          });
          console.log(this.a);
          //内层 遍历外层对象和总数居做判断
          this.a.forEach((item1, index1, arr1) => {
            let c = [];
            this.roleData.forEach((item2, index2, arr2) => {
              //如果总数居里内层的id等于a
              if (item2.file_type_fid === item1.file_type_id) {
                c.push(item2);
              }
            });
            item1.children = c;
          });
        });

        console.log();
      });
    },
    // ========================表格===========================
    //====搜索输入===
    // search(ruleFormshu) {
    //   this.$refs[ruleFormshu].validate((valid) => {
    //     if (valid) {
    //       console.log('ruleFormshu',ruleFormshu)
    //       http.dangantable(ruleFormshu).then((res)=>{
    //             console.log("搜素返回的数据", res);
    //      })

    //       // http.system(this.ruleForm).then((r) => {
    //       //   console.log("返回的数据", r);
    //       //   this.tableData = r.data;
    //       //    this.setCurrList(1);
    //       //   console.log(this.ruleForm);
    //       // });
    //     } else {
    //       console.log("error submit!!");
    //       return false;
    //     }
    //   });
    // },
    // 表格序号
    indexFn(index) {
      index = index + 1 + (this.currPage - 1) * this.pageSize;
      return index;
    },
    //重置按钮
    resetForm(formName) {
      this[formName] = {};
      this.$refs[formName].resetFields();
    },
  },

  //===========================获取数据====================================
  mounted() {
    this.userToken.userToken = sessionStorage.getItem("userToken");
    http.project().then((r) => {
      console.log("总数据aaaaa", r.data);
      this.treeData = r.data;
      console.log("总数据", this.treeData);
      var treeData1 = [];
      this.treeData.forEach((item, index, arr) => {
        if (item.file_type_fid === 0) {
          treeData1.push(item);
        }
      });
      console.log("this.treeData1", treeData1);
      treeData1.forEach((item1, index1, arr1) => {
        var treeData2 = [];
        this.treeData.forEach((item2, index2, arr2) => {
          if (item2.file_type_fid === item1.file_type_id) {
            treeData2.push(item2);
          }
        });
        item1.children = treeData2;
      });
      this.newData = treeData1;
      console.log("新总数据", treeData1);
    });
    http.dangantable({ file_name: "" }).then((res) => {
      this.tableData = res.data;
      console.log("表格", res.data);
    });

    // http.dangantable().then((res)=>{

    // })

    // let arr = [];
    // 树状图结构外层显示
    // http.project(this.ruleForm).then((r) => {
    //  this.roleData = r.data;
    //   //遍历循环总数居居
    //   this.roleData.forEach((item, index, arr) => {
    //     //如果总数据元素的file_type_fid属于外层加在新数组a里
    //     if (item.file_type_fid === 0) {
    //       this.a.push(item);
    //     }
    //   });

    //   console.log(this.a);
    //   //内层 遍历外层对象和总数居做判断
    //   this.a.forEach((item1, index1, arr1) => {
    //     let c = [];
    //     this.roleData.forEach((item2, index2, arr2) => {
    //       //如果总数居里内层的id等于a
    //       if (item2.file_type_fid === item1.file_type_id) {
    //         c.push(item2);
    //       }
    //     });
    //     item1.children = c;
    //   });
    // });
  },
};
</script>
<style scoped>
.padding >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px !important;
}
.el-select >>> .el-input__inner {
  width: 178px;
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.l-conter-left {
  width: 24%;
  height: 680px;
  background: white;
}
.y-big-conter {
  width: 100%;
  height: 657px;
  display: flex;
  justify-content: space-between;
  /* position: relative; */
  background: #eee;
}
.y-conter {
  margin-top: 10px;
  /* width: 200px; */
  /* width: 18%; */
  width: 300px;
  height: 480px;
  overflow: hidden;

  overflow-y: scroll;
  /* overflow: auto; */

  background: #fff;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
/*树形控件容器  */
.cebian {
  height: 432px;
  width: 200px;
  /* 第一种 */
  /* height:auto!important;
  min-height:200px; */
  overflow: auto;
  /* background: sienna; */
  /* 第二种 */
  /* max-height:100%;
   overflow:auto */
}
/* 标题文字设置 */
.y-title {
  padding-left: 10px;
  font-size: 18px;
  font-weight: bold;
}
/* .y-inp {
  height: 30px;
} */
/* 对话框输入框 */
.el-input >>> .el-input__inner {
  width: 230px;
  height: 30px;
  margin-left: 8px;
}
.el-select >>> .el-input__inner {
  width: 230px;
  height: 30px;
  margin-left: 5px;
}

/* 左侧的上部导航 */
.y-tb {
  float: right;
  padding-right: 10px;
  font-size: 18px;
  font-weight: bold;
}
/* nav头部 */
.y-nav {
  width: 100%;
  height: 50px;
  padding-top: 15px;
  border-bottom: 1px solid #eee;
  /* background: salmon; */
}
/* 公共输入框样式更改 */
.el-input {
  width: 230px;
  height: 30px;
}
.el-input__inner {
  height: 30px;
  width: 230px;
}
/* 输入框 */
.sort {
  width: 230px;
  height: 30px;
}
/* 对话框 */
/* 输入框左侧边 */
.y-left-inp {
  margin-left: 60px;
}
/* 输入框右侧边*/
.y-right-inp {
  margin-left: 60px;
}
/* 右侧表格 */
.y-table {
  width: 75%;
  height: 680px;
  /* margin-left: 10px; */
  background: #fff;
  margin-right: 10px;
  overflow-x: hidden;
  /* position: absolute; */
  /* right: 0px; */
  /* margin-left: 10px; */
  /* top: 0px; */
}
/* 按钮 */
.el-button {
  height: 30px;
  line-height: 0px;
}
.y-form {
  width: 90%;
  height: 50px;
  margin-top: 15px;
  margin-left: 15px;
  /* background: cadetblue; */
}
.y-table-style {
  width: 99%;
  margin-top: 15px;
  background: cornflowerblue;
  margin-left: 5px;
}
</style>